<template>
<el-container>
    <el-header style="padding:0;height:50px">
        <Header></Header>
    </el-header>
    <router-view></router-view>
    <el-footer>
        <Footer style="background-color:#f7fbfd"></Footer>
    </el-footer>
</el-container>
</template>

<style scoped>

</style>

<style>
* {
    margin: 0%;
    padding: 0%;
}

.el-header,
.el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #ffffff;
    text-align: center;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

export default {
    name: 'App',
    components: {
        Header,
        Footer,
    },

}
</script>
